<!--
 * @Description: 
 * @Author: liuzl
 * @Date: 2024-11-05 15:47:34
 * @LastEditors: liuzl
 * @LastEditTime: 2024-11-06 15:55:58
-->
<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>网上书城</title>

    <style>

        body {

            font-family: Arial, sans-serif;

        }

        .header {

            background-color: hsl(0, 0%, 100%);

            padding: 10px;

            text-align: left; 

            display: flex;

            justify-content: space-between; /* 使用 space-between 来分配空间 */

        }

        .header .header-logo {

            margin-right: auto; /* 将 logo 靠左 */

        }

        .header-links {

            margin-left: 20px; /* 为链接组添加左边距 */

        }

        .header .cart-image {

            margin-right: 10px; /* 设置购物车图片的右边距 */

        }

        .footer {

            background-color: #e0d2b4;

            color: rgb(14, 13, 13);

            padding: 10px;

            display: flex; /* 使用Flexbox布局 */

            align-items: center; /* 垂直居中对齐 */

        }

         .footer img {

         margin-left: 100px; /* 为图片添加左边距 */

         }

        .nav {

            background-color: #1c5828;

            color: white;

            padding: 10px;

            text-align: center;

        }

        .nav1 {

            background-color: #b2a072;

            color: rgb(0, 0, 0);

            padding: 10px;

            text-align: right;

        }

        .nav2 {
			position: absolute; /* 使用绝对定位 */
    		top: 2px; /* 根据需要调整距离顶部的距离 */
    		right: 2px; /* 根据需要调整距离右侧的距离 */
            background-color: #f7f9f8;

            padding: 10px;

            text-align: center;
			
        }
		.nav2 p {
    	margin: 0; /* 移除默认的段落间距 */
		}
        .nav a {

            color: rgb(248, 248, 248);

            margin: 0 10px;

            text-decoration: none;

        }

        .nav a:last-child {

         color: yellow; /* 最后一个链接的颜色设置为黄色 */

}

        .main-content {
			position: relative; 
            border: 2px solid #9b9c9b; /* 绿色边框 */

            padding: 10px; /* 内边距 */

            /* margin: 20px 0; 上下外边距 */

            width: 800px; /* 固定宽度为800像素 */

            margin: 0 auto; /* 上下外边距为0，左右自动（居中） */

            background-color: #e6e3d1;

        }

        .product-list {

         display: grid;

         grid-template-columns: repeat(4, 1fr); /* 创建四列，每列占据相同的空间 */

         grid-gap: 10px; /* 设置网格项之间的间距 */

         justify-content: center; /* 使网格项在容器中居中对齐 */

        }

        .product {

            width: 150px;

            margin: 10px;

            text-align: center;

        }

        .product img {

            width: 100%;

            height: auto;

        }

        .pagination {

            text-align: center;

            margin: 20px 0;

        }

        .pagination a {

            margin: 0 5px;

            text-decoration: none;

            color: blue;

        }

        .category-title {
		position: relative; /* 添加相对定位 */
         font-weight: bold; /* 加粗字体 */

         border-bottom: 2px solid #000; /* 添加横线 */


         padding-bottom: 5px; /* 横线与文字之间的距离 */

         margin-bottom: 10px; /* 横线与下面内容的距离 */

         }



        .category-bold {

         font-weight: bold; /* 加粗字体 */

         }



        .category-normal {

         font-weight: normal; /* 不加粗字体 */

         }



        .category-subtitle {

         display: flex;

         justify-content: space-between; /* 在两端分配内容 */

         border-bottom: 2px solid #000; /* 添加横线 */

         padding-bottom: 5px; /* 横线与文字之间的距离 */

         margin-bottom: 10px; /* 横线与下面内容的距离 */

         margin-left: 10px; /* 根据需要调整与标题的间距 */

         }

    </style>

</head>

<body> 



    <div class="header">

        <div class="header-logo">

            <img src="bookimages/logo.png" alt="Header Image" class="header-image">

        </div>

        <div style="display: flex; align-items: center;">

            <img src="bookimages/cart.gif" alt="Shopping Cart" class="cart-image">

            <div class="header-links">

                <a href="your-shopping-cart-url">购物车</a>|

                <a href="your-help-center-url">帮助中心</a>|

                <a href="your-account-url">我的账户</a>|

                <a href="your-register-url">新用户注册</a>

            </div>

        </div>

    </div>

   

    



</div>



<div class="nav">

    <a href="#">文学</a>

    <a href="#">生活</a>

    <a href="#">计算机</a>

    <a href="#">外语</a>

    <a href="#">经管</a>

    <a href="#">励志</a>

    <a href="#">社科</a>

    <a href="#">学术</a>

    <a href="#">少儿</a>

    <a href="#">艺术</a>

    <a href="#">原版</a>

    <a href="#">科技</a>

    <a href="#">考试</a>

    <a href="#">生活百科</a>

    <a href="#">全部目录商品</a>

</div>



<div class="nav1">

    Search<input type="text" placeholder="Search">

    <button style="height: 0;padding: 0; margin: 0; border: none;">

        <img src="bookimages/serchbutton.gif">

    </button>

</div>





    <div class="main-content">
		
        <p class="category-title">商品目录</p>
		<div class="nav2">

			<p>首页&gt;旅游&gt;图书列表</p>
	
			</div>
        <div class="category-subtitle">

        <p>

        <span class="category-bold">计算机类</span>

        <span class="category-normal">共100种商品</span>

        </p>
		<div class="nav2">

    	<p>首页&gt;旅游&gt;图书列表</p>

    	</div>

        </div>
       

    <img src="bookimages/productlist.gif">

<div class="product-list">

    <div class="product">

        <img src="bookcover/101.jpg" alt="时空穿行">

        <p>书名: xxx</p>

        <p>售价: xxx</p>

    </div>

    <div class="product">

        <img src="bookcover/102.jpg" alt="感悟">

        <p>书名: xxx</p>

        <p>售价: xxx</p>

    </div>

    <div class="product">

        <img src="bookcover/103.jpg" alt="影响力">

        <p>书名: xxx</p>

        <p>售价: xxx</p>

    </div>

    <div class="product">

        <img src="bookcover/104.jpg" alt="BOYS">

        <p>书名: xxx</p>

        <p>售价: xxx</p>

    </div>

    

    <div class="product">

        <img src="bookcover/105.jpg" alt="别做正常的">

        <p>书名: xxx</p>

        <p>售价: xxx</p>

    </div>

    <div class="product">

        <img src="bookcover/106.jpg" alt="学会宽容">

        <p>书名: xxx</p>

        <p>售价: xxx</p>

    </div>

    <div class="product">

        <img src="bookcover/107.jpg" alt="大通和小花">

        <p>书名: xxx</p>

        <p>售价: xxx</p>

    </div>

    <div class="product">

        <img src="bookcover/TS10.jpg" alt="谁动了我的">

        <p>书名: xxx</p>

        <p>售价: xxx</p>

    </div>

  </div>



<div class="pagination">

    <a href="#">上一页</a>

    <a class= "checked select" href="#">1</a>

    <a class= "checked" href="#">2</a>

    <a class= "checked" href="#">3</a>

    <a class= "checked" href="#">4</a>

    <a class= "checked" href="#">5</a>

    <a class= "checked" href="#">6</a>

    <a href="#">下一页</a>

   </div>

</div>

<div class="nav2">

    <br>

</div>



<div class="footer">

    <img src="bookimages/logo.png">

    

    <p style="margin-left: 50px;">CONTACT US 

        <br>

        copyright 2008© BookStore All Rights RESERVED</p>



</div>

</body>

</html>

